<template>
    <div class="jd-home-banner">
        <van-swipe class="swiper-container" :autoplay="3000" :duration="1000" indicator-color="red">
            <van-swipe-item v-for="item in bannerList" :key="item.bannerid">
                <van-image :src="item.img"></van-image>
            </van-swipe-item>
        </van-swipe>
    </div>
</template>

<script setup lang="ts">
// 导入对应的api请求功能函数
import { bannerListApi } from '@/api/banner'
// 导入类型限制
import type { MyBannerItem } from '@/config/interface'
import { ref, onMounted } from 'vue'

// 提前准备一个数组,请求回来以后进行替换
// 用该数组渲染页面(因为涉及到替换,所以要使用 ref 来定义)
const bannerList = ref<MyBannerItem[]>([])

// 挂载完毕的钩子
onMounted(async () => {
    // 获取轮播图列表
    const res = await bannerListApi()
    console.log(res);
    bannerList.value = res.data
})
</script>

<style scoped lang="scss">
@import '@/styles/variable.scss';

.jd-home-banner {
    height: 180px;
    position: relative;
    box-sizing: border-box;
    padding: 15px;

    &:after {
        content: '';
        position: absolute;
        left: 0;
        top: -50px;
        width: 100%;
        height: 100%;
        background-color: $globalColor;
        border-radius: 0 0 200px 200px / 0 0 40px 40px;
        z-index: -1;
    }

    .swiper-container {
        width: 100%;
        height: 100%;
        background-color: blue;
        border-radius: 10px;
        overflow: hidden;
    }

    .my-swipe .van-swipe-item {
        color: #fff;
        font-size: 20px;
        line-height: 150px;
        text-align: center;
        background-color: #39a9ed;
    }
}
</style>